<template>
  <div class="job-account h100">
    <dividerTitle :title="componentTitle">
      <el-radio-group v-model="radios" size="mini">
      <el-radio-button label="day">日视图</el-radio-button>
      <el-radio-button label="week">周视图</el-radio-button>
      <el-radio-button label="month">月视图</el-radio-button>
    </el-radio-group>
    </dividerTitle>
    <div class="echart-content">
      <div class="bar-box">
        <verticalBar
            v-if="showBar"
            :id="verticleBarId"
            :type="bigScreen"
            :option="barOption"
          ></verticalBar>
          <!-- <no-data v-else :dataHeight="chartHeight"></no-data> -->
      </div>
    </div>
  </div>
</template>

<script>
import {jobAccountData} from '@/api/workStation/workStation.js'
import verticalBar from "@/components/echart/verticalBar"
export default {
  components: {
    verticalBar,
  },
  props:['componentTitle'],
  data() {
    return {
     radios:'day',
     showBar:true,
     bigScreen:false,
     verticleBarId:'verticleBarId',
     barOption:{}
    };
  },
  created() {
  },
  watch:{
    radios(val) {
      this.barChartData(val)
    }
  },
  mounted(){
    this.$nextTick(() =>{
      this.init()
    })
  },
  methods: {
    init(){
      this.barChartData(this.radios)
    },
    async barChartData(val){
      this.showBar = false;
      let legendName = []
      if(val =='day'){
        legendName = ["昨日", "今日"]
      }
      if(val =='week'){
        legendName = ["上周", "本周"]
      }
      if(val =='month'){
        legendName = ["上月", "本月"]
      }
        let seriesData = [],
        _interval = 0,
        _rotate = 0,
        xAxisData = [];
      let params = {
        account: this.$store.getters.userInfo.account,
        dateType: val,
      };
      let res = await jobAccountData(params);
      if (res.code == 200) {
        let typeArr = []
        let preArr = []
        let currArr = []
        let typeNameArr = []
        res.data.map(item =>{
          typeArr.push(item.type)
          preArr.push(item.pre)
          currArr.push(item.curr)
          switch (item.type) {
            case "createDefect":
              item.typeName = '发现缺陷'
              break; 
            case "finishOrder":
              item.typeName = '完成工单'
              break; 
            case "finishPatrol":
              item.typeName = '完成巡视'
              break; 
              case "createTicketWork":
              item.typeName = '开出工作票'
              break; 
              case "createTicketOperation":
              item.typeName = '开出操作票'
              break; 
              case "shiftRecord":
              item.typeName = '累计值班'
              break; 
              case "inputEquipment":
              item.typeName = '录入台账'
              break; 
              case "workFlowAudit":
              item.typeName = '审批流程'
              break; 
          }
          typeNameArr.push(item.typeName)
        })
        xAxisData = typeNameArr;
        let last = {
          name: legendName[0],
          barWidth: 8,
          color: "#18AAE3",
          data: preArr,
        };
        let current = {
          name: legendName[1],
          barWidth: 8,
          color: "#0D60B4",
          data: currArr,
        };
        seriesData.push(last);
        seriesData.push(current);
        if (res.data.length > 0) {
          this.showBar = true;
        }
      }
      let obj = {
        legend: {
          data: legendName,
          left: "40%",
          icon: "square",
          textStyle: {
            color: "#666666",
            fontSize: 14,
          },
          itemWidth: 8,
          itemHeight: 8,
          padding: [10, 20, 0, 0],
          itemGap: 20,
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 40,
          top: 30,
        },
        xAxis: {
          data: xAxisData,
          name: "",
          textStyle: "#666666",
          axisLine: {
            lineStyle: {
              color: "#666666",
            },
          },
          axisLabel: {
            interval: _interval,
            rotate: _rotate,
          },
        },
        tooltip: {
          trigger: "axis",
          transitionDuration: 0, //防止tooltip的抖动
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
          formatter: function (params) {
            var s = "";
            s += (params[0].axisValue ? params[0].axisValue : "-") + "<br/>";
            if (params.length == 2) {
              s +=
                '<div style="display:inline-block;height: 10px;width: 10px;border-radius:50%;margin-right:5px;background-color:' +
                params[1].color +
                '"></div>' +
                "上月: " +
                (params[1].data ? params[1].data : "-") +
                "<br/>";
            }
            s +=
              '<div style="display:inline-block;height: 10px;width: 10px;border-radius:50%;margin-right:5px;background-color:' +
              params[0].color +
              '"></div>' +
              "本月: " +
              (params[0].data ? params[0].data : "-");
            return s;
          },
        },
        title: {
          text: "",
        },
        yAxis: {
          name:'(个)',
          nameTextStyle:{
            color:'#fff',
            left:0,
            top:12
          },
          axisLabel: {
            textStyle: {
              color: "#666666",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#666666",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: seriesData,
        stack: false,
      };
      this.barOption = obj;
    },
    },
  }
</script>

<style lang="less" scoped>
/deep/.el-radio-button__orig-radio + .el-radio-button__inner {
    font-size: 14px;
    border-color: #BABABA;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #0D60B4;
    //border-color: #DCDFE6;
    border-color: #0D60B4;
    background-color: #E1EFFC;
    box-shadow: -1px 0 0 0 #0D60B4;
}
.job-account{
  height: 100%;
  width: 100%;
  .echart-content{
    width: 100%;
    height: calc(100% - 48px);
    .bar-box{
      height: 100%;
      width: 100%;
    }
  }
}
</style>